<template>
    <el-main class="mainDiv">
        <el-row :gutter="10">
            <el-col :span="12" class="colDiv">
                <el-card>
                    <template #header>
                        <div class="card-header">
                            <span>概况</span>
                            <el-icon class="imageClass">
                                <Refresh/>
                            </el-icon>
                        </div>
                    </template>
                    <el-row :gutter="20" class="elRowDiv">
                        <el-col :span="8">
                            <p>即时库存(元)</p>
                            <p>{{ overviewMap.total_inventory_cost }}</p>
                        </el-col>
                        <el-col :span="8">
                            <p>销售总金额</p>
                            <p>{{ salesOrderMap.totalAmount }}</p>
                        </el-col>
                        <el-col :span="8">
                            <p>采购总金额</p>
                            <p>{{ purchaseOrderMap.totalAmount }}</p>
                        </el-col>
                    </el-row>
                </el-card>
            </el-col>
            <el-col :span="6" class="colDiv">
                <el-card>
                    <template #header>
                        <div class="card-header">
                            <span>客户</span>
                            <el-icon class="imageClass" @click="getAllCustomerByData">
                                <Refresh/>
                            </el-icon>
                        </div>
                    </template>
                    <el-row :gutter="20" class="elRowDiv">
                        <el-col :span="6">
                            <p>今日+</p>
                            <p>{{ customerMap.todayCount }}</p>
                        </el-col>
                        <el-col :span="6">
                            <p>本周+</p>
                            <p>{{ customerMap.weekCount }}</p>
                        </el-col>
                        <el-col :span="6">
                            <p>本月+</p>
                            <p>{{ customerMap.monthCount }}</p>
                        </el-col>
                        <el-col :span="6">
                            <p>客户数</p>
                            <p>{{ customerMap.totalQuantity }}</p>
                        </el-col>
                    </el-row>
                </el-card>
            </el-col>
            <el-col :span="6" class="colDiv">
                <el-card>
                    <template #header>
                        <div class="card-header">
                            <span>供应商</span>
                            <el-icon class="imageClass">
                                <Refresh/>
                            </el-icon>
                        </div>
                    </template>
                    <el-row :gutter="20" class="elRowDiv">
                        <el-col :span="6">
                            <p>今日+</p>
                            <p>{{ providerMap.todayCount }}</p>
                        </el-col>
                        <el-col :span="6">
                            <p>本周+</p>
                            <p>{{ providerMap.weekCount }}</p>
                        </el-col>
                        <el-col :span="6">
                            <p>本月+</p>
                            <p>{{ providerMap.monthCount }}</p>
                        </el-col>
                        <el-col :span="6">
                            <p>供应商数</p>
                            <p>{{ providerMap.totalQuantity }}</p>
                        </el-col>
                    </el-row>
                </el-card>
            </el-col>
        </el-row>
        <el-row :gutter="10">
            <el-col :span="12">
                <div style="width: 100%; background-color: #fff; margin-bottom: 25px;">
                    <p class="card-header2">
                        <span>销售</span>
                        <el-icon class="imageClass">
                            <Refresh/>
                        </el-icon>
                    </p>
                    <div>
                        <span class="cDiv">
                            <p class="p1">订单</p>
                            <el-row :gutter="0" class="row">
                                <el-col :span="12" class="newCol">
                                    <p style="color: #a7a7a7; font-size: 14px; margin-bottom: 5px;">今日笔数</p>
                                    <p style="margin: 0px; font-size: 22.5px; margin: 5px 0px;">
                                        {{ salesOrderMap.todayCount }}
                                    </p>
                                    <span style="font-size: 13px;">
                                        <span>本周:{{ salesOrderMap.weekCount }}</span><br>
                                        <span>本月:{{ salesOrderMap.monthCount }}</span>
                                    </span>
                                </el-col>
                                <el-col :span="12" class="newCol">
                                    <p style="color: #a7a7a7; font-size: 14px; margin-bottom: 5px;">今日金额</p>
                                    <p style="margin: 0px; font-size: 22.5px; margin: 5px 0px;">
                                        {{ salesOrderMap.todayAmount }}
                                    </p>
                                    <span style="font-size: 13px;">
                                        <span>本周:{{ salesOrderMap.weekAmount }}</span><br>
                                        <span>本月:{{ salesOrderMap.monthAmount }}</span>
                                    </span>
                                </el-col>
                            </el-row>
                        </span>
                        <span class="cDiv">
                            <p class="p1">出库</p>
                            <el-row :gutter="0" class="row">
                                <el-col :span="12" class="newCol">
                                    <p style="color: #a7a7a7; font-size: 14px; margin-bottom: 5px;">今日笔数</p>
                                    <p style="margin: 0px; font-size: 22.5px; margin: 5px 0px;">
                                        {{ salesOutBoundMap.todayCount }}
                                    </p>
                                    <span style="font-size: 13px;">
                                        <span>本周:{{ salesOutBoundMap.weekCount }}</span><br>
                                        <span>本月:{{ salesOutBoundMap.monthCount }}</span>
                                    </span>
                                </el-col>
                                <el-col :span="12" class="newCol">
                                    <p style="color: #a7a7a7; font-size: 14px; margin-bottom: 5px;">今日金额</p>
                                    <p style="margin: 0px; font-size: 22.5px; margin: 5px 0px;">
                                        {{ salesOutBoundMap.todayAmount }}
                                    </p>
                                    <span style="font-size: 13px;">
                                        <span>本周:{{ salesOutBoundMap.weekAmount }}</span><br>
                                        <span>本月:{{ salesOutBoundMap.monthAmount }}</span>
                                    </span>
                                </el-col>
                            </el-row>
                        </span>
                        <span class="cDiv">
                            <p class="p1">应收</p>
                            <el-row :gutter="0" class="row">
                                <el-col :span="12" class="newCol">
                                    <p style="color: #a7a7a7; font-size: 14px; margin-bottom: 5px;">今日笔数</p>
                                    <p style="margin: 0px; font-size: 22.5px; margin: 5px 0px;">
                                        {{ receivableMap.todayCount }}
                                    </p>
                                    <span style="font-size: 12px;">
                                        <span>本周:{{ receivableMap.weekCount }}</span><br>
                                        <span>本月:{{ receivableMap.monthCount }}</span>
                                    </span>
                                </el-col>
                                <el-col :span="12" class="newCol">
                                    <p style="color: #a7a7a7; font-size: 14px; margin-bottom: 5px;">今日金额</p>
                                    <p style="margin: 0px; font-size: 22.5px; margin: 5px 0px;">
                                        {{ receivableMap.todayAmount }}
                                    </p>
                                    <span style="font-size: 12px;">
                                        <span>本周:{{ receivableMap.weekAmount }}</span><br>
                                        <span>本月:{{ receivableMap.monthAmount }}</span>
                                    </span>
                                </el-col>
                            </el-row>
                        </span>
                        <span class="cDiv">
                            <p class="p1">退货</p>
                            <el-row :gutter="0" class="row">
                                <el-col :span="12" class="newCol">
                                    <p style="color: #a7a7a7; font-size: 14px; margin-bottom: 5px;">今日笔数</p>
                                    <p style="margin: 0px; font-size: 22.5px; margin: 5px 0px;">
                                        {{ salesReturnMap.todayCount }}
                                    </p>
                                    <span style="font-size: 12px;">
                                        <span>本周:{{ salesReturnMap.weekCount }}</span><br>
                                        <span>本月:{{ salesReturnMap.monthCount }}</span>
                                    </span>
                                </el-col>
                                <el-col :span="12" class="newCol">
                                    <p style="color: #a7a7a7; font-size: 14px; margin-bottom: 5px;">今日金额</p>
                                    <p style="margin: 0px; font-size: 22.5px; margin: 5px 0px;">
                                        {{ salesReturnMap.todayAmount }}
                                    </p>
                                    <span style="font-size: 12px;">
                                        <span>本周:{{ salesReturnMap.weekAmount }}</span><br>
                                        <span>本月:{{ salesReturnMap.monthAmount }}</span>
                                    </span>
                                </el-col>
                            </el-row>
                        </span>
                    </div>
                </div>
            </el-col>
            <el-col :span="12">
                <div style="width: 100%; background-color: #fff;">
                    <p class="card-header2">
                        <span>采购</span>
                        <el-icon class="imageClass">
                            <Refresh/>
                        </el-icon>
                    </p>
                    <div>
                        <span class="cDiv">
                            <p class="p1">订单</p>
                            <el-row :gutter="0" class="row">
                                <el-col :span="12" class="newCol">
                                    <p style="color: #a7a7a7; font-size: 14px; margin-bottom: 5px;">今日笔数</p>
                                    <p style="margin: 0px; font-size: 22.5px; margin: 5px 0px;">
                                        {{ purchaseOrderMap.todayCount }}
                                    </p>
                                    <span style="font-size: 12px;">
                                        <span>本周:{{ purchaseOrderMap.weekCount }}</span><br>
                                        <span>本月:{{ purchaseOrderMap.monthCount }}</span>
                                    </span>
                                </el-col>
                                <el-col :span="12" class="newCol">
                                    <p style="color: #a7a7a7; font-size: 14px; margin-bottom: 5px;">今日金额</p>
                                    <p style="margin: 0px; font-size: 22.5px; margin: 5px 0px;">
                                        {{ purchaseOrderMap.todayAmount }}
                                    </p>
                                    <span style="font-size: 12px;">
                                        <span>本周:{{ purchaseOrderMap.weekAmount }}</span><br>
                                        <span>本月:{{ purchaseOrderMap.monthAmount }}</span>
                                    </span>
                                </el-col>
                            </el-row>
                        </span>
                        <span class="cDiv">
                            <p class="p1">入库</p>
                            <el-row :gutter="0" class="row">
                                <el-col :span="12" class="newCol">
                                    <p style="color: #a7a7a7; font-size: 14px; margin-bottom: 5px;">今日笔数</p>
                                    <p style="margin: 0px; font-size: 22.5px; margin: 5px 0px;">
                                        {{ purchaseInBoundMap.todayCount }}
                                    </p>
                                    <span style="font-size: 12px;">
                                        <span>本周:{{ purchaseInBoundMap.weekCount }}</span><br>
                                        <span>本月:{{ purchaseInBoundMap.monthCount }}</span>
                                    </span>
                                </el-col>
                                <el-col :span="12" class="newCol">
                                    <p style="color: #a7a7a7; font-size: 14px; margin-bottom: 5px;">今日金额</p>
                                    <p style="margin: 0px; font-size: 22.5px; margin: 5px 0px;">
                                        {{ purchaseInBoundMap.todayAmount }}
                                    </p>
                                    <span style="font-size: 12px;">
                                        <span>本周:{{ purchaseInBoundMap.weekAmount }}</span><br>
                                        <span>本月:{{ purchaseInBoundMap.monthAmount }}</span>
                                    </span>
                                </el-col>
                            </el-row>
                        </span>
                        <span class="cDiv">
                            <p class="p1">应付</p>
                            <el-row :gutter="0" class="row">
                                <el-col :span="12" class="newCol">
                                    <p style="color: #a7a7a7; font-size: 14px; margin-bottom: 5px;">今日笔数</p>
                                    <p style="margin: 0px; font-size: 22.5px; margin: 5px 0px;">
                                        {{ purchaseRequestPayMap.todayCount }}
                                    </p>
                                    <span style="font-size: 12px;">
                                        <span>本周:{{ purchaseRequestPayMap.weekCount }}</span><br>
                                        <span>本月:{{ purchaseRequestPayMap.monthCount }}</span>
                                    </span>
                                </el-col>
                                <el-col :span="12" class="newCol">
                                    <p style="color: #a7a7a7; font-size: 14px; margin-bottom: 5px;">今日金额</p>
                                    <p style="margin: 0px; font-size: 22.5px; margin: 5px 0px;">
                                        {{ purchaseRequestPayMap.todayAmount }}
                                    </p>
                                    <span style="font-size: 12px;">
                                        <span>本周:{{ purchaseRequestPayMap.weekAmount }}</span><br>
                                        <span>本月:{{ purchaseRequestPayMap.monthAmount }}</span>
                                    </span>
                                </el-col>
                            </el-row>
                        </span>
                        <span class="cDiv">
                            <p class="p1">退货</p>
                            <el-row :gutter="0" class="row">
                                <el-col :span="12" class="newCol">
                                    <p style="color: #a7a7a7; font-size: 14px; margin-bottom: 5px;">今日笔数</p>
                                    <p style="margin: 0px; font-size: 22.5px; margin: 5px 0px;">
                                        {{ purchaseReturnMap.todayCount }}
                                    </p>
                                    <span style="font-size: 12px;">
                                        <span>本周:{{ purchaseReturnMap.weekCount }}</span><br>
                                        <span>本月:{{ purchaseReturnMap.monthCount }}</span>
                                    </span>
                                </el-col>
                                <el-col :span="12" class="newCol">
                                    <p style="color: #a7a7a7; font-size: 14px; margin-bottom: 5px;">今日金额</p>
                                    <p style="margin: 0px; font-size: 22.5px; margin: 5px 0px;">
                                        {{ purchaseReturnMap.todayAmount }}
                                    </p>
                                    <span style="font-size: 12px;">
                                        <span>本周:{{ purchaseReturnMap.weekAmount }}</span><br>
                                        <span>本月:{{ purchaseReturnMap.monthAmount }}</span>
                                    </span>
                                </el-col>
                            </el-row>
                        </span>
                    </div>
                </div>
            </el-col>
        </el-row>
    </el-main>
</template>

<script setup>
import {
    ref,
    onMounted,
    reactive,
    computed,
    toRaw,
    watch,
    nextTick,
    onUnmounted
} from "vue";
import * as echarts from 'echarts';
import {ElMessage} from "element-plus";
import request from '@/util/request'

const overviewMap = ref({
    total_inventory_cost: 0,
})

const getTotalInventoryCost = async () => {
    await request.post('/kc/StoreGoodSummary/getTotalInventoryCost')
        .then((res) => {
            if (res.data.code === '200') {
                overviewMap.value.total_inventory_cost = res.data.data.total_inventory_cost.toLocaleString();
            }
        }).catch(() => {
            ElMessage({
                type: 'error',
                message: '获得销售情况数据失败,请重试',
            })
        })
}

// 销售情况
const salesOrderMap = ref({
    totalQuantity: 0, // 本年总记录数
    totalAmount: 0, // 本年总金额
    todayCount: 0, // 当天记录数
    weekCount: 0, // 本周记录数
    monthCount: 0, // 本月记录数
    todayAmount: 0, // 当天总金额
    weekAmount: 0, // 本周总金额
    monthAmount: 0, // 本月总金额
})
const getSalesOrderDataByTime = async () => {
    await request.post('/xs/SalesOrderSummary/getTotalSalesDataByDate')
        .then((res) => {
            if (res.data.code === '200') {
                let {totalQuantity, totalAmount, todayCount} = res.data.data;
                salesOrderMap.value = res.data.data
                salesOrderMap.value.totalAmount = totalAmount.toLocaleString()
            }
        }).catch(() => {
            ElMessage({
                type: 'error',
                message: '获得销售情况数据失败,请重试',
            })
        })
}

// 销售出库
const salesOutBoundMap = ref({
    todayCount: 0, // 当天记录数
    weekCount: 0, // 本周记录数
    monthCount: 0, // 本月记录数
    todayAmount: 0, // 当天总金额
    weekAmount: 0, // 本周总金额
    monthAmount: 0, // 本月总金额
})
const getSalesOutBoundDataByTime = async () => {
    await request.post('/xs/SalesOrderSummary/getSalesOutBoundDataByTime')
        .then((res) => {
            if (res.data.code === '200') {
                salesOutBoundMap.value = res.data.data
            }
        }).catch(() => {
            ElMessage({
                type: 'error',
                message: '获得销售出库数据失败,请重试',
            })
        })
}

// 销售应收
const receivableMap = ref({
    todayCount: 0, // 当天记录数
    weekCount: 0, // 本周记录数
    monthCount: 0, // 本月记录数
    todayAmount: 0, // 当天总金额
    weekAmount: 0, // 本周总金额
    monthAmount: 0, // 本月总金额
})
const getReceivableDataByTime = async () => {
    await request.post('/xs/SalesOrderSummary/getReceivableDataByTime')
        .then((res) => {
            if (res.data.code === '200') {
                receivableMap.value = res.data.data
            }
        }).catch(() => {
            ElMessage({
                type: 'error',
                message: '获得销售应收数据失败,请重试',
            })
        })
}

// 销售退货
const salesReturnMap = ref({
    todayCount: 0, // 当天记录数
    weekCount: 0, // 本周记录数
    monthCount: 0, // 本月记录数
    todayAmount: 0, // 当天总金额
    weekAmount: 0, // 本周总金额
    monthAmount: 0, // 本月总金额
})
const getSalesReturnDataByTime = async () => {
    await request.post('/xs/SalesOrderSummary/getSalesReturnDataByTime')
        .then((res) => {
            if (res.data.code === '200') {
                salesReturnMap.value = res.data.data
            }
        }).catch(() => {
            ElMessage({
                type: 'error',
                message: '获得销售退货数据失败,请重试',
            })
        })
}

// 采购订单
const purchaseOrderMap = ref({
    totalAmount: 0,
    todayCount: 0, // 当天记录数
    weekCount: 0, // 本周记录数
    monthCount: 0, // 本月记录数
    todayAmount: 0, // 当天总金额
    weekAmount: 0, // 本周总金额
    monthAmount: 0, // 本月总金额
    draftingCount: 0, // 本年编制中（status=101）的记录数
    pendingReviewCount: 0, // 本年待审核（status=102）的记录数
    rejectedCount: 0 // 本年审核被拒（status=202）的记录数
})
const getPurchaseOrderDataByTime = async () => {
    await request.post('/cg/PurchaseOrderSummary/getPurchaseOrderDataByDate')
        .then((res) => {
            if (res.data.code === '200') {
                let {totalQuantity, totalAmount} = res.data.data;
                purchaseOrderMap.value = res.data.data
                purchaseOrderMap.value.totalAmount = totalAmount.toLocaleString()
            }
        }).catch(() => {
            ElMessage({
                type: 'error',
                message: '获得采购订单数据失败,请重试',
            })
        })
}

// 采购入库单据
const purchaseInBoundMap = ref({
    todayCount: 0, // 当天记录数
    weekCount: 0, // 本周记录数
    monthCount: 0, // 本月记录数
    todayAmount: 0, // 当天总金额
    weekAmount: 0, // 本周总金额
    monthAmount: 0, // 本月总金额
})
const getPurchaseInBoundDataByTime = async () => {
    await request.post('/cg/PurchaseOrderSummary/getPurchaseInBoundDataByTime')
        .then((res) => {
            if (res.data.code === '200') {
                purchaseInBoundMap.value = res.data.data
            }
        }).catch(() => {
            ElMessage({
                type: 'error',
                message: '获得采购入库单数据失败,请重试',
            })
        })
}

// 采购应付
const purchaseRequestPayMap = ref({
    todayCount: 0, // 当天记录数
    weekCount: 0, // 本周记录数
    monthCount: 0, // 本月记录数
    todayAmount: 0, // 当天总金额
    weekAmount: 0, // 本周总金额
    monthAmount: 0, // 本月总金额
})
const getPurchaseRequestDataByTime = async () => {
    await request.post('/cg/PurchaseOrderSummary/getPurchaseRequestDataByTime')
        .then((res) => {
            if (res.data.code === '200') {
                purchaseRequestPayMap.value = res.data.data
            }
        }).catch(() => {
            ElMessage({
                type: 'error',
                message: '获得采购应付单数据失败,请重试',
            })
        })
}

// 采购退货
const purchaseReturnMap = ref({
    todayCount: 0, // 当天记录数
    weekCount: 0, // 本周记录数
    monthCount: 0, // 本月记录数
    todayAmount: 0, // 当天总金额
    weekAmount: 0, // 本周总金额
    monthAmount: 0, // 本月总金额
})
const getPurchaseReturnDataByTime = async () => {
    await request.post('/cg/PurchaseOrderSummary/getPurchaseReturnDataByTime')
        .then((res) => {
            if (res.data.code === '200') {
                purchaseReturnMap.value = res.data.data
            }
        }).catch(() => {
            ElMessage({
                type: 'error',
                message: '获得采购退货数据失败,请重试',
            })
        })
}

// 获得客户数量
const customerMap = ref({
    todayCount: 0,
    weekCount: 0,
    monthCount: 0,
    totalQuantity: 0
})
const getAllCustomerByData = async () => {
    await request.post('/basic/Customer/getAllCustomerByData')
        .then((res) => {
            if (res.data.code === '200') {
                customerMap.value = res.data.data
            }
        }).catch(() => {
            ElMessage({
                type: 'error',
                message: '获得客户数量失败,请重试',
            })
        })
}

// 获得供应商数量
const providerMap = ref({
    todayCount: 0,
    weekCount: 0,
    monthCount: 0,
    totalQuantity: 0
})
const getProviderAllByData = async () => {
    await request.post('/basic/Provider/getProviderAllByData')
        .then((res) => {
            if (res.data.code === '200') {
                providerMap.value = res.data.data
            }
        }).catch(() => {
            ElMessage({
                type: 'error',
                message: '获得供应商数量失败,请重试',
            })
        })
}

const tableData = reactive([
    {
        name: '销售订单',
        draft: salesOrderMap.value.draftingCount,
        pending: salesOrderMap.value.pendingReviewCount,
        processing: salesOrderMap.value.rejectedCount
    },
    {
        name: '销售出库',
        draft: salesOutBoundMap.value.draftingCount,
        pending: salesOutBoundMap.value.pendingReviewCount,
        processing: salesOutBoundMap.value.rejectedCount
    },
    {
        name: '销售退货',
        draft: salesReturnMap.value.draftingCount,
        pending: salesReturnMap.value.pendingReviewCount,
        processing: salesReturnMap.value.rejectedCount
    },
    {
        name: '应收单',
        draft: receivableMap.value.draftingCount,
        pending: receivableMap.value.pendingReviewCount,
        processing: receivableMap.value.rejectedCount
    },
    {
        name: '采购订单',
        draft: purchaseOrderMap.value.draftingCount,
        pending: purchaseOrderMap.value.pendingReviewCount,
        processing: purchaseOrderMap.value.rejectedCount
    },
    {
        name: '采购入库',
        draft: purchaseInBoundMap.value.draftingCount,
        pending: purchaseInBoundMap.value.pendingReviewCount,
        processing: purchaseInBoundMap.value.rejectedCount
    },
    {
        name: '采购退货',
        draft: purchaseReturnMap.value.draftingCount,
        pending: purchaseReturnMap.value.pendingReviewCount,
        processing: purchaseReturnMap.value.rejectedCount
    },
    {
        name: '应付单',
        draft: purchaseRequestPayMap.value.draftingCount,
        pending: purchaseRequestPayMap.value.pendingReviewCount,
        processing: purchaseRequestPayMap.value.rejectedCount
    },
])

// // 树状结构
// // 定义多个 ref
// const chartRef1 = ref(null);
// const chartRef2 = ref(null);
// const chartRef3 = ref(null);
// const chartRef4 = ref(null);
//
// // 存储多个图表实例
// let chartInstances = [];
// // 销售金额
// const InitializationChartRef1 = async () => {
//     let xAxisArr = [];
//     let seriesArr = [];
//     let month = new Date().getMonth() + 1;
//     await request.post('xs/sales/getMonthSalesOrderData', {month}, {headers: {"Content-Type": "application/x-www-form-urlencoded",}})
//         .then((res) => {
//             if (res.data.code == 200) {
//                 const list = res.data.data; // 假设返回的是 ArrayList<Map>
//                 list.forEach((item) => {
//                     xAxisArr.push(item.month);
//                     seriesArr.push(Number(item.monthAmount) || 0);
//                 });
//             }
//         })
//         .catch((error) => {
//             ElMessage.error("获得销售金额统计数据失败")
//         })
//
//     const chartInstance = echarts.init(chartRef1.value); // 使用独立的 chartInstance
//     const option = {
//         tooltip: {trigger: 'axis', axisPointer: {type: 'shadow'}},
//         grid: {left: '3%', right: '4%', bottom: '3%', containLabel: true},
//         yAxis: [{type: "value"}],
//         xAxis: [{type: 'category', data: xAxisArr, axisTick: {alignWithLabel: true}}],
//         series: [{name: 'Direct', type: 'bar', barWidth: '60%', data: seriesArr, itemStyle: {color: '#1890FF'}}],
//         dataZoom: [{type: 'inside', disabled: true}],
//     };
//     chartInstance.setOption(option);
//     chartInstances.push(chartInstance);
// };

// =====出库金额
// const InitializationChartRef2 = async () => {
//     let xAxisArr = [];
//     let seriesArr = [];
//     let month = new Date().getMonth() + 1;
//     await request.post('/erpwarehouse/warehouse/getMonthSalesOutBoundData', {month}, {headers: {"Content-Type": "application/x-www-form-urlencoded",}})
//         .then((res) => {
//             if (res.data.code == 200) {
//                 const list = res.data.data; // 假设返回的是 ArrayList<Map>
//                 list.forEach((item) => {
//                     xAxisArr.push(item.month);
//                     seriesArr.push(Number(item.monthAmount) || 0);
//                 });
//             }
//         })
//         .catch((error) => {
//             ElMessage.error("获得出库金额统计数据失败")
//         })
//
//     const chartInstance = echarts.init(chartRef2.value); // 使用独立的 chartInstance
//     const option = {
//         tooltip: {trigger: 'axis', axisPointer: {type: 'shadow'}},
//         grid: {left: '3%', right: '4%', bottom: '3%', containLabel: true},
//         yAxis: [{type: "value"}],
//         xAxis: [{type: 'category', data: xAxisArr, axisTick: {alignWithLabel: true}}],
//         series: [{name: 'Direct', type: 'bar', barWidth: '60%', data: seriesArr, itemStyle: {color: '#1890FF'}}],
//         dataZoom: [{type: 'inside', disabled: true}],
//     };
//     chartInstance.setOption(option);
//     chartInstances.push(chartInstance);
// };

// =====采购金额
// const InitializationChartRef3 = async () => {
//     let xAxisArr = [];
//     let seriesArr = [];
//     let month = new Date().getMonth() + 1;
//     await request.post('/cg/cg/getMonthPurchaseOrderData', {month}, {headers: {"Content-Type": "application/x-www-form-urlencoded",}})
//         .then((res) => {
//             if (res.data.code == 200) {
//                 const list = res.data.data; // 假设返回的是 ArrayList<Map>
//                 list.forEach((item) => {
//                     xAxisArr.push(item.month);
//                     seriesArr.push(Number(item.monthAmount) || 0);
//                 });
//             }
//         })
//         .catch((error) => {
//             ElMessage.error("获得采购金额统计数据失败")
//         })
//     const chartInstance = echarts.init(chartRef3.value); // 使用独立的 chartInstance
//     const option = {
//         tooltip: {trigger: 'axis', axisPointer: {type: 'shadow'}},
//         grid: {left: '3%', right: '4%', bottom: '3%', containLabel: true},
//         yAxis: [{type: "value"}],
//         xAxis: [{type: 'category', data: xAxisArr, axisTick: {alignWithLabel: true}}],
//         series: [{name: 'Direct', type: 'bar', barWidth: '60%', data: seriesArr, itemStyle: {color: '#1890FF'}}],
//         dataZoom: [{type: 'inside', disabled: true}],
//     };
//     chartInstance.setOption(option);
//     chartInstances.push(chartInstance);
// };

// ======销售退货金额
// const InitializationChartRef4 = async () => {
//     let xAxisArr = [];
//     let seriesArr = [];
//     let month = new Date().getMonth() + 1;
//     await request.post('/sales/getMonthSalesReturnData', {month}, {headers: {"Content-Type": "application/x-www-form-urlencoded",}})
//         .then((res) => {
//             if (res.data.code == 200) {
//                 const list = res.data.data; // 假设返回的是 ArrayList<Map>
//                 list.forEach((item) => {
//                     xAxisArr.push(item.month);
//                     seriesArr.push(Number(item.monthAmount) || 0);
//                 });
//             }
//         })
//         .catch((error) => {
//             ElMessage.error("获得销售退货金额统计数据失败")
//         })
//     const chartInstance = echarts.init(chartRef4.value); // 使用独立的 chartInstance
//     const option = {
//         tooltip: {trigger: 'axis', axisPointer: {type: 'shadow'}},
//         grid: {left: '3%', right: '4%', bottom: '3%', containLabel: true},
//         yAxis: [{type: "value"}],
//         xAxis: [{type: 'category', data: xAxisArr, axisTick: {alignWithLabel: true}}],
//         series: [{name: 'Direct', type: 'bar', barWidth: '60%', data: seriesArr, itemStyle: {color: '#1890FF'}}],
//         dataZoom: [{type: 'inside', disabled: true}],
//     };
//     chartInstance.setOption(option);
//     chartInstances.push(chartInstance);
// };

// const handleResize = () => {
//     chartInstances.forEach(instance => {
//         if (instance) instance.resize();
//     });
// };

// 组件挂载时执行
onMounted(async () => {
    await getTotalInventoryCost();
    await getSalesOrderDataByTime();
    await getSalesOutBoundDataByTime();
    await getReceivableDataByTime();
    await getSalesReturnDataByTime();
    await getPurchaseOrderDataByTime();
    await getPurchaseInBoundDataByTime();
    await getPurchaseRequestDataByTime();
    await getPurchaseReturnDataByTime();

    getAllCustomerByData();
    getProviderAllByData();

    // InitializationChartRef1();
    // InitializationChartRef2();
    // InitializationChartRef3();
    // InitializationChartRef4();

    // window.addEventListener('resize', handleResize, {passive: true});
});

setTimeout(function () {
    tableData.splice(0, tableData.length, ...[
        {
            name: '销售订单',
            draft: salesOrderMap.value.draftingCount,
            pending: salesOrderMap.value.pendingReviewCount,
            processing: salesOrderMap.value.rejectedCount
        },
        {
            name: '销售出库',
            draft: salesOutBoundMap.value.draftingCount,
            pending: salesOutBoundMap.value.pendingReviewCount,
            processing: salesOutBoundMap.value.rejectedCount
        },
        {
            name: '销售退货',
            draft: salesReturnMap.value.draftingCount,
            pending: salesReturnMap.value.pendingReviewCount,
            processing: salesReturnMap.value.rejectedCount
        },
        {
            name: '应收单',
            draft: receivableMap.value.draftingCount,
            pending: receivableMap.value.pendingReviewCount,
            processing: receivableMap.value.rejectedCount
        },
        {
            name: '采购订单',
            draft: purchaseOrderMap.value.draftingCount,
            pending: purchaseOrderMap.value.pendingReviewCount,
            processing: purchaseOrderMap.value.rejectedCount
        },
        {
            name: '采购入库',
            draft: purchaseInBoundMap.value.draftingCount,
            pending: purchaseInBoundMap.value.pendingReviewCount,
            processing: purchaseInBoundMap.value.rejectedCount
        },
        {
            name: '采购退货',
            draft: purchaseReturnMap.value.draftingCount,
            pending: purchaseReturnMap.value.pendingReviewCount,
            processing: purchaseReturnMap.value.rejectedCount
        },
        {
            name: '应付单',
            draft: purchaseRequestPayMap.value.draftingCount,
            pending: purchaseRequestPayMap.value.pendingReviewCount,
            processing: purchaseRequestPayMap.value.rejectedCount
        },
    ]);
}, 2000);

// 组件销毁时清理
// onUnmounted(() => {
//     window.removeEventListener('resize', handleResize, {passive: true});
//     chartInstances.forEach(instance => {
//         if (instance) instance.dispose();
//     });
//     chartInstances = [];
// });
</script>

<style scoped>
.mainDiv {
    width: 100%;
    background-color: #f0f2f5;
    padding: 10px;
}

.custom-card {
    height: 98%;
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.custom-table {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.custom-table .el-table__body-wrapper {
    flex: 1;
    overflow-y: auto;
}

.imageClass {
    color: #3AA0FF;
}

.colDiv {
    margin-bottom: 14px;
}

.cardDiv {
    width: 100%;
    height: 205px;
    margin-bottom: 14px;
}

.elRowDiv {
    text-align: center;
}

.cardDiv2 {
    margin-bottom: 14px;
    padding: 0px;
}

/* 内部卡片容器 - 控制布局 */
.inner-cards-container {
    display: flex;
    flex-wrap: wrap;
    padding: 0px;
    gap: 2%; /* 卡片间距 */
}

.el-card__body {
    padding: 0px !important;
}

.card-header2 {
    border-bottom: 0.1px solid #e9e9e9;
    padding: 20px;
    margin: 0px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #303133;
    font-size: 20px;
}

.cDiv {
    width: 49.7%;
    display: inline-block;
    border: 0.1px solid #e9e9e9;
    border-top: 0px;
    transition: all 0.3s ease; /* 添加过渡动画使效果更平滑 */
}

.cDiv:hover {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.162); /* 阴影效果 */
    z-index: 10; /* 确保放大时覆盖其他元素 */
    position: relative; /* 需要配合z-index使用 */
}

.cDiv .p1 {
    font-size: 15px;
    margin-bottom: 5px;
    text-indent: 15px;
}

.cDiv .newCol {
    padding: 0px 20px 10px 30px;
}

#tableDiv {
    width: 100%;
    height: 140px;
    margin-bottom: 10px;
}
</style>
